<div class="ui stackable grid">
  <div class="row">
    <div class="five wide column">
      <div class="ui center aligned fluid segment">
        <div class="ui grid container">
          <div class="middle aligned content eight wide column left aligned">
            <h4 class="ui header">
              {{t 'Event Types'}}
            </h4>
          </div>
          <div class="eight wide column right aligned">
            <button class="ui icon circular blue button {{if this.device.isMobile 'fluid'}}" {{action 'openModalFor' 'event-type'}}>
              <i class="icon plus"></i>
            </button>
          </div>
        </div>
        <div class="ui divider"></div>
        <table class="ui celled table">
          <tbody>
            {{#each this.model.eventTypes as |eventType|}}
              <tr>
                <td>
                  <div class="ui grid">
                    <div class="middle aligned content eight wide column left aligned">
                      {{eventType.name}}
                    </div>
                    <div class="eight wide column right aligned">
                      <div class="ui horizontal compact basic buttons">
                        <UiPopup
                          @content={{t "Edit"}}
                          @class="ui icon button"
                          @click={{action "openModalFor" eventType}}>
                          <i class="edit icon"></i>
                        </UiPopup>
                        <UiPopup
                          @content={{t "Delete"}}
                          @class="ui icon button"
                          @click={{action (confirm (t "Are you sure you would like to delete this event type?") (action "deleteEventProperty" eventType))}}>
                          <i class="trash icon"></i>
                        </UiPopup>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            {{/each}}
          </tbody>
        </table>
      </div>
    </div>
    <div class="six wide column">
      <div class="ui center aligned fluid segment">
        <div class="ui grid container">
          <div class="middle aligned content eight wide column left aligned">
            <h4 class="ui left aligned header">
              {{t 'Event Topics'}}
            </h4>
          </div>
          <div class="eight wide column right aligned">
            <button class="ui icon circular blue button {{if this.device.isMobile 'fluid'}}" {{action 'openModalFor' 'event-topic'}}>
              <i class="icon plus"></i>
            </button>
          </div>
        </div>
        <div class="ui divider"></div>
        <table class="ui celled table">
          <tbody>
            {{#each this.model.eventTopics as |eventTopic|}}
              <tr>
                <td>
                  <div class="ui grid">
                    <div class="middle aligned content eight wide column left aligned">
                      {{eventTopic.name}}
                    </div>
                    <div class="eight wide column right aligned">
                      <div class="ui horizontal compact basic buttons">
                        <UiPopup
                          @content={{t "Edit"}}
                          @class="ui icon button"
                          @click={{action "openModalFor" eventTopic}}>
                          <i class="edit icon"></i>
                        </UiPopup>
                        <UiPopup
                          @content={{t "Delete"}}
                          @class="ui icon button"
                          @click={{action (confirm (t "Are you sure you would like to delete this event topic?") (action "deleteEventProperty" eventTopic))}}>
                          <i class="trash icon"></i>
                        </UiPopup>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            {{/each}}
          </tbody>
        </table>
      </div>
    </div>
    <div class="five wide column">
      <div class="ui center aligned fluid segment">
        <div class="ui grid container">
          <div class="middle aligned content eight wide column left aligned">
            <h4 class="ui left aligned header">
              {{t 'Event Subtopics'}}
            </h4>
          </div>
          <div class="eight wide column right aligned">
            <button class="ui icon circular blue {{if this.disableEventSubtopic 'disabled'}} button {{if this.device.isMobile 'fluid'}}" {{action 'openModalFor' 'event-sub-topic'}}>
              <i class="icon plus"></i>
            </button>
          </div>
        </div>
        <div class="ui divider"></div>
        <div class="field">
          <label>{{t 'Event Topic'}}</label>
          <UiDropdown
            @class="search selection"
            @onChange={{action "loadSubTopics"}} as |execute mapper|>
            <i class="dropdown icon"></i>
            <div class="default text">{{t 'Select Event Topic'}}</div>
            <div class="menu">
              {{#each this.model.eventTopics as |topic|}}
                <div class="item" data-value="{{map-value mapper topic}}">{{topic.name}}</div>
              {{/each}}
            </div>
          </UiDropdown>
        </div>
        {{#if this.model.eventSubTopics}}
          <table class="ui celled table">
            <tbody>
              {{#each this.model.eventSubTopics as |subTopic|}}
                <tr>
                  <td>
                    <div class="ui grid">
                      <div class="middle aligned content eight wide column left aligned">
                        {{subTopic.name}}
                      </div>
                      <div class="eight wide column right aligned">
                        <div class="ui horizontal compact basic buttons">
                          <UiPopup
                            @content={{t "Edit"}}
                            @class="ui icon button"
                            @click={{action "openModalFor" subTopic}}>
                            <i class="edit icon"></i>
                          </UiPopup>
                          <UiPopup
                            @content={{t "Delete"}}
                            @class="ui icon button"
                            @click={{action (confirm (t "Are you sure you would like to delete this event sub topic?") (action "deleteEventProperty" subTopic))}}>
                            <i class="trash icon"></i>
                          </UiPopup>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
              {{/each}}
            </tbody>
          </table>
        {{/if}}
      </div>
    </div>
  </div>
</div>

<Modals::Admin::Content::NewEventTypeModal
  @isOpen={{this.eventType.openModal}}
  @name={{this.eventType.name}}
  @addEventProperty={{action "addEventProperty" this.eventType}} />

<Modals::Admin::Content::NewEventTopicModal
  @isOpen={{this.eventTopic.openModal}}
  @name={{this.eventTopic.name}}
  @addEventProperty={{action "addEventProperty" this.eventTopic}} />

<Modals::Admin::Content::NewEventSubTopicModal
  @isOpen={{this.eventSubTopic.openModal}}
  @model={{this.model}}
  @eventSubTopic={{this.eventSubTopic}}
  @eventTopic={{this.currentTopicSelected}}
  @addEventProperty={{action "addEventProperty" this.eventSubTopic}} />
